<template>
  <div class="login-container">
    <canvas ref="canvas" class="particles-background"></canvas>
    <div class="login-card">
      <div class="header">
        <h1>Welcome Back</h1>
        <p>Please login to continue</p>
      </div>

      <form class="form" @submit.prevent="Login">
        <div class="input-group">
          <input v-model="user.username"
              type="text"
              placeholder=" "
              class="input-field"
          />
          <label class="input-label">Email</label>
          <i class="fas fa-user input-icon"></i>
        </div>

        <div class="input-group">
          <input v-model="user.password"
              type="password"
              placeholder=" "
              class="input-field"
          />
          <label class="input-label">Password</label>
          <i class="fas fa-lock input-icon"></i>
        </div>

        <button  type="submit" class="login-btn" >
          Sign In
          <i class="fas fa-arrow-right btn-icon"></i>
        </button>
      </form>
      <div class="footer">
        <a href="/reset" class="link">Forgot Password?</a>
        <span class="divider">|</span>
        <a href="/register" class="link">Create Account</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted, reactive, watch} from 'vue';
import {login} from "@/api/login.js";
import {useRoute, useRouter} from "vue-router";
import useAuthStore from "@/stores/auth.js";
const authStore = useAuthStore();
const canvas = ref(null);
let particles = [];
let animationFrame;
const router = useRouter();
let user = reactive({
  username: "",
  password: "",
})

const response=ref(null);
const error=ref(null);
async function Login() {
  event.preventDefault(); // 阻止默认的表单提交行为
  try{
    console.log("===============发送了请求=======================");
    const res = await login(user.username,user.password);
    response.value = res.data;
    console.log(response.value);
    if(response.value.code === 200){
        authStore.loginSuccess(response.value.data.token,null);
        router.push("/main/index");
    }
  }catch(err){
    error.value = err.response ? err.response.data : err.message;
    response.value = null; // 清空响应数据
    console.log(err.value);
  }
}
watch(()=> user.username,(newValue) => {
  console.log(newValue)
})
watch(()=> user.password,(newValue) => {
  console.log(newValue)
})
class Particle {
  constructor(ctx, width, height) {
    this.ctx = ctx;
    this.x = Math.random() * width;
    this.y = Math.random() * height;
    this.velocity = {
      x: (Math.random() - 0.5) * 0.5,
      y: (Math.random() - 0.5) * 0.5
    };
    this.radius = Math.random() * 1.5 + 0.5;
    this.color = `rgba(255, 255, 255, ${Math.random() * 0.4 + 0.2})`;
  }

  draw() {
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    this.ctx.fillStyle = this.color;
    this.ctx.fill();
  }

  update(width, height) {
    if (this.x < 0 || this.x > width) this.velocity.x *= -1;
    if (this.y < 0 || this.y > height) this.velocity.y *= -1;

    this.x += this.velocity.x;
    this.y += this.velocity.y;
    this.draw();
  }
}

const initParticles = () => {
  const ctx = canvas.value.getContext('2d');
  const { width, height } = canvas.value;

  // 初始化80个粒子
  particles = Array.from({ length: 80 }, () => new Particle(ctx, width, height));
};

const animate = () => {
  const ctx = canvas.value.getContext('2d');
  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);

  // 绘制粒子连线
  particles.forEach((p1, i) => {
    p1.update(canvas.value.width, canvas.value.height);
    particles.slice(i + 1).forEach(p2 => {
      const dx = p1.x - p2.x;
      const dy = p1.y - p2.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      if (distance < 100) {
        ctx.beginPath();
        ctx.strokeStyle = `rgba(255,255,255,${1 - distance/100})`;
        ctx.lineWidth = 0.3;
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
      }
    });
  });

  animationFrame = requestAnimationFrame(animate);
};

const handleResize = () => {
  canvas.value.width = window.innerWidth;
  canvas.value.height = window.innerHeight;
  initParticles();
};

onMounted(() => {
  canvas.value.width = window.innerWidth;
  canvas.value.height = window.innerHeight;
  window.addEventListener('resize', handleResize);
  initParticles();
  animate();
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  cancelAnimationFrame(animationFrame);
});
</script>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

.particles-background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Poppins', sans-serif;
  position: relative;
}

.login-card {
  background: rgba(255, 255, 255, 0.96);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 400px;
  transform: translateY(0);
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);

  &:hover {
    transform: translateY(-5px);
  }
}

.header {
  text-align: center;
  margin-bottom: 2rem;

  h1 {
    color: #2d3748;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }

  p {
    color: #718096;
    font-size: 0.9rem;
  }
}

.input-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-field {
  width: 100%;
  padding: 1rem 2.5rem 1rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;

  &:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);

    + .input-label {
      transform: translateY(-120%) scale(0.9);
      color: #667eea;
    }
  }

  &:not(:placeholder-shown) + .input-label {
    transform: translateY(-120%) scale(0.9);
  }
}

.input-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #718096;
  pointer-events: none;
  transition: all 0.3s ease;
  background: white;
  padding: 0 0.3rem;
}

.input-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #cbd5e0;
}

.login-btn {
  width: 100%;
  padding: 1rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background: #5a67d8;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);

    .btn-icon {
      transform: translateX(5px);
    }
  }
}

.btn-icon {
  margin-left: 0.8rem;
  transition: transform 0.3s ease;
}

.footer {
  margin-top: 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.link {
  color: #667eea;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;

  &:hover {
    color: #5a67d8;
  }
}

.divider {
  color: #cbd5e0;
  font-weight: 300;
}
</style>
